
<template>
     <van-field  :style="state['info']?'':'display:none'">
        <template #input>
          <div class="hidden">{{state['color']}}
          {{state['background']}}
          {{state['info']}}</div>
          <span  class="w-full p-3 text-5xl text-center text-black"   :style="'background:'+state.background+';color:'+state.color+';font-size:'+state.fontSize+';text-align:'+state.textAligin"  >{{ state['info']}}</span>
        </template>
      </van-field>
</template>

<script setup lang="ts"> 
// import img_index_path from '~/noData.png'; 
// import { useI18n } from "vue-i18n"; 
// const { t } = useI18n();
defineProps<{ state: any }>()

// example
// <Tip :state="tipState" />
// const tipState = reactive({ 
//   color: 'white',
//   background: 'green',
//   info: '',
//   infoClass: '',    
// });
// const handleScan = () => {
//   console.log("scan", scan.value);
//   tipState.info = scan.value;
//   tipState.color = 'white';
//   tipState.background = Math.random() > 0.5 ? 'red' : 'green';
// };




// const emits = defineEmits(['close','confirm','reload']);
// const close = () => {
//     emits('close');
//   };
//   const confirm = (e:any) => {
//     emits('confirm',e);
//   };
//   const reload = () => {
//     emits('reload');
//   };
// const count = ref(123456)
// defineExpose({
//   count
// })

// console.log(confirm)
</script>
<script lang="ts">
// output component name
export default {
    name: 'Tip'
}
</script>